<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=750, user-scalable=no" />
		<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" /> -->
		<meta http-equiv="pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="apple-mobile-web-app-title" content="" />
		<title>mobile touch test</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body {
				font-size: 28px;
				background-color: #eee;
			}
			canvas {
				vertical-align: middle;
				width: 100%;
				background-color: #fff;
			}
		</style>
	</head>

	<body>
		<div style="padding: 0 10px">
			<p>-----</p>
			<p>-----</p>
			<p>-----</p>
			<p>-----</p>
			<p>-----</p>
			<p>-----</p>
			<p>-----</p>
			<p>-----</p>
			<p>-----</p>
			<p>-----</p>
			<p>-----</p>
			<p>-----</p>
			<p>-----</p>
			<p>-----</p>
			<p>-----</p>
			<p>-----</p>
			<p>-----</p>
			<p>-----</p>
			<p>-----</p>
			<p>-----</p>
			<p>-----</p>
			<p>-----</p>
			<p>-----</p>
			<p>-----</p>
			<p>-----</p>
			<p>-----</p>
		</div>
		<div id="resImg" style="padding: 0 10px"></div>
		<div
			style="
				padding: 10px;
				display: flex;
				justify-content: center;
				align-items: center;
			"
		>
			<p>手写签名区域</p>
		</div>
		<div
			style="
				padding: 0 10px;
				display: flex;
				justify-content: center;
				align-items: center;
			"
		>
			<canvas id="drawLine"></canvas>
		</div>
		<div
			style="
				padding: 10px 10px 30px 10px;
				display: flex;
				justify-content: center;
				align-items: center;
			"
		>
			<button
				id="reSetBtn"
				type="button"
				style="width: 5em; height: 2em; margin: 5px; font-size: 28px"
			>
				重置
			</button>
			<button
				id="confirmBtn"
				type="button"
				style="width: 5em; height: 2em; margin: 5px; font-size: 28px"
			>
				确定
			</button>
		</div>

		<script type="text/javascript">
			function canvasDrawLineInit() {
				console.log(
					1111,
					document.documentElement.clientWidth,
					document.documentElement.clientWidth / 2
				);

				var mycanvas = document.getElementById('drawLine');
				console.log(2222, mycanvas.width, mycanvas.height);
				mycanvas.width = mycanvas.clientWidth;
				mycanvas.height = mycanvas.clientWidth / 2;
				console.log(3333, mycanvas.width, mycanvas.height);

				ctx = mycanvas.getContext('2d');
				// ctx.fillStyle = "#f00";
				ctx.strokeStyle = '#f00';
				ctx.lineWidth = 5;
				// ctx.lineJoin="round";

				// 重置
				document
					.getElementById('reSetBtn')
					.addEventListener('click', reSet, false);
				function reSet() {
					ctx.clearRect(0, 0, mycanvas.width, mycanvas.height);
				}
				// 确定
				var isHaveImg = false;
				document
					.getElementById('confirmBtn')
					.addEventListener('click', confirm, false);
				function confirm() {
					if (isHaveImg) {
						// document.getElementById('resImg').removeChild(document.getElementById('resImg').getElementsByTagName('img')[0]);
						document
							.getElementById('resImg')
							.getElementsByTagName('img')[0]
							.remove();
					} else {
						isHaveImg = true;
					}
					var img = document.createElement('img');
					img.setAttribute('src', mycanvas.toDataURL('image/png'));
					document.getElementById('resImg').appendChild(img);
					setTimeout(() => {
						_left = mycanvas.offsetLeft;
						_top = mycanvas.offsetTop;
					}, 500);
				}

				//
				mycanvas.addEventListener('touchstart', touchStartEvent, false);
				mycanvas.addEventListener('touchend', touchEndEvent, false);
				mycanvas.addEventListener('touchmove', touchMoveEvent, false);

				var _left = mycanvas.offsetLeft;
				var _top = mycanvas.offsetTop;
				console.log(4444, _left, _top);

				var mouseX = null;
				var mouseY = null;
				function touchStartEvent(e) {
					mouseX = event.touches[0].pageX - _left;
					mouseY = event.touches[0].pageY - _top;

					ctx.beginPath();
					ctx.moveTo(mouseX, mouseY);

					return false;
				}
				function touchEndEvent(e) {
					mouseX = null;
					mouseY = null;
					return false;
				}
				function touchMoveEvent(e) {
					e.preventDefault();
					mouseX = event.touches[0].pageX - _left;
					mouseY = event.touches[0].pageY - _top;

					ctx.lineTo(mouseX, mouseY);
					ctx.stroke();
				}
			}
			canvasDrawLineInit();
		</script>
	</body>
</html>
